<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .list {
        width: 200px;
        height: 100px;
        background: skyblue;
        overflow: auto;
      }
      .news {
        height: 30px;
      }
      .list::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
      }
      .list::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #535353;
      }
      .list::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: #ededed;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
      const { Component } = React;

      class NewList extends Component {
        state = { newArr: [] };
        componentDidMount() {
          setInterval(() => {
            const { newArr } = this.state;
            const str = `新数据${newArr.length + 1}`;
            this.setState({
              newArr: [str, ...newArr],
            });
          }, 1000);
        }

        getSnapshotBeforeUpdate(prevProps, prevState) {
          console.log("getSnapshotBeforeUpdate", this.list.scrollHeight);
          return this.list.scrollHeight;
        }
        componentDidUpdate(prevProps, prevState, height) {
          console.log("this.list.scrollTop", this.list.scrollTop);
          this.list.scrollTop += this.list.scrollHeight - height;
          console.log("this.list.scrollHeight", this.list.scrollHeight);
        }

        render() {
          const { newArr } = this.state;
          return (
            <ul className="list" ref={(s) => (this.list = s)}>
              {newArr.map((item, index) => {
                return (
                  <li key={index + "_" + Math.random()} className="news">
                    {item}
                  </li>
                );
              })}
            </ul>
          );
        }
      }
      const App = (
        <div>
          <NewList></NewList>
        </div>
      );
      ReactDOM.render(App, document.getElementById("root"));
    </script>
  </body>
</html>
